<template>
  <div ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BetterScroll from 'better-scroll'
  import ObserveDom from '@better-scroll/observe-dom'
  import Pullup from '@better-scroll/pull-up'
  import ObserveImage from '@better-scroll/observe-image'

  BetterScroll.use(ObserveDom)
  BetterScroll.use(ObserveImage)
  BetterScroll.use(Pullup)

  export default {
    name: "Scroll",
    data() {
      return {
        scroll: null
      }
    },
    props: {
      probeType: { /*是否滚动监听*/
        type: Number,
        default() {
          return 3
        }
      },
      pullUpLoad: { /*是否监听下拉*/
        type: Boolean,
        default() {
          return false
        }
      },
    },
    mounted() {
      this.scroll = BetterScroll(this.$refs.wrapper, {
        probeType: this.probeType, // 滚动监听
        pullUpLoad: this.pullUpLoad,//扩展上拉加载的能力,
        click: true, // 启用点击事件
        observeImage: true, // 开启对 wrapper 子元素中图片元素的加载的探测
        observeDOM: true, // 开启对 content 以及 content 子元素 DOM 改变的探测
      })

      if (this.probeType === 2 || this.probeType === 3) {
        /*监听滚动*/
        this.scroll.on("scroll", position => {
          this.$emit('scroll', position)
        })
      }
      if (this.pullUpLoad) {
        /*扩展上拉加载的能力,再次请求数据*/
        this.scroll.on('pullingUp', () => {
          this.$emit("pullingUp")
          this.scroll.finishPullUp()
          // this.scroll.refresh()
        })
      }

    },
    methods: {
      scrollTo(x, y, time) {
        /*改变窗口位置*/
        this.scroll.scrollTo(x, y, time)
      },
      scrollToElement(el) {
        this.scroll.scrollToElement(el,1000)
      }
    }
  }
</script>

<style scoped>

</style>
